rc-tabs

What is rc-tabs?

The rc-tabs package is a React component for creating and managing tabs in a web application. It provides a set of features that allow developers to create customizable and accessible tab interfaces with ease.

What are rc-tabs's main functionalities?

Basic Tabs

This feature allows you to create basic tabbed interfaces. Each TabPane component represents a tab panel with its own content.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';

const Demo = () => (
  <Tabs defaultActiveKey="1">
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Animated Tabs

This feature adds animations to the tab transitions, providing a more dynamic user experience.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';

const Demo = () => (
  <Tabs defaultActiveKey="1" animated={{ inkBar: true, tabPane: true }}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Vertical Tabs

This feature allows you to create vertical tabs, with the tab list displayed on the side rather than the top.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';

const Demo = () => (
  <Tabs defaultActiveKey="1" tabPosition="left">
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Customizable Tabs

This feature allows for customization of the tab bar, enabling the use of custom classes and styles.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';

const renderTabBar = (props, DefaultTabBar) => (
  <DefaultTabBar {...props} className="my-custom-class" />
);

const Demo = () => (
  <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Other packages similar to rc-tabs

react-tabs

react-tabs is a package that provides components for managing tabs in React. It is similar to rc-tabs but focuses on simplicity and accessibility, offering a more straightforward API with less customization options.

react-bootstrap-tabs

react-bootstrap-tabs is a component that integrates with the React-Bootstrap framework, providing tabs that are styled according to Bootstrap's design. It is suitable for those who are using Bootstrap for styling and want to maintain design consistency.

README

rc-tabs

---

React Tabs

Screenshot

Example

http://localhost:8000/examples

online example: http://react-component.github.io/tabs/

install

Feature

Keyboard

• left and up: switch to previous tab
• right and down: switch to next tab

Usage

import Tabs, { TabPane } from "rc-tabs";
import TabContent from "rc-tabs/lib/TabContent";
import ScrollableInkTabBar from "rc-tabs/lib/ScrollableInkTabBar";

var callback = function(key) {};

React.render(
  <Tabs defaultActiveKey="2" onChange={callback} renderTabBar={() => <ScrollableInkTabBar />} renderTabContent={() => <TabContent />}>
    <TabPane tab="tab 1" key="1">
      first
    </TabPane>
    <TabPane tab="tab 2" key="2">
      second
    </TabPane>
    <TabPane tab="tab 3" key="3">
      third
    </TabPane>
  </Tabs>,
  document.getElementById("t2")
);

Usage of navWrapper() function

navWrapper() prop allows to wrap tabs bar in a component to provide additional features.
Eg with react-sortablejs to make tabs sortable by DnD :

import Sortable from 'react-sortablejs';

navWrapper={(content) => <Sortable>{content}</Sortable>}

API

Tabs

props:

name	type	default	description
activeKey	String		current active tabPanel's key
tabBarPosition	String		tab nav 's position. one of ['left','right','top','bottom']
defaultActiveKey	String	first active tabPanel's key	initial active tabPanel's key if activeKey is absent
renderTabBar	():React.Node		How to render tab bar
renderTabContent	():React.Node		How to render tab content
navWrapper	(tabContent: React.Node):React.Node		Wrapper function that will wrap around tab panes, whould be useful for features such as drag and drop
onChange	(key: string): void		called when tabPanel is changed
destroyInactiveTabPane	Boolean	false	whether destroy inactive tabpane when change tab
prefixCls	String	rc-tabs	prefix class name, use to custom style
direction	String	ltr	Layout direction of tabs component, it supports RTL direction too.

TabPane

props:

name	type	default	description
key	Object		corresponding to activeKey, should be unique
style	Object
placeholder	React.Node		lazyrender children
tab	React.Node		current tab's title corresponding to current tabPane
forceRender	Boolean	false	forced render of content in tabs, not lazy render after clicking on tabs

lib/TabBar

name	type	default	description
onTabClick	(key: string, event: MouseEvent): void		callback when tab clicked
style			bar style
extraContent	React Node		extra content placed one the right of tab bar
tabBarGutter	number		the gap between tabs
keyboard	boolean	true	whether support keyboard to navigate tabs

lib/InkTabBar

tab bar with ink indicator, in addition to tab bar props, extra props:

name	type	default	description
styles	{ inkBar }		can set inkBar style

lib/ScrollableTabBar

scrollable tab bar, in addition to tab bar props, extra props:

name	type	default	description
onPrevClick	(e: Event): void		callback when prev button is clicked
onNextClick	(e: Event): void		callback when next button is clicked
prevIcon	ReactNode		specific the prev icon
nextIcon	ReactNode		specific the next icon

lib/ScrollableInkTabBar

scrollable tab bar with ink indicator, same with tab bar and ink bar and scrollable bar props.

name	type	default	description
children	(node) => node	-	Customize tab bar node

lib/SwipeableInkTabBar (Use for Mobile)

swipeable tab bar with ink indicator, same with tab bar/ink bar props, and below is the additional props.

name	type	default	description
pageSize	number	5	show how many tabs at one page
speed	number	5	swipe speed, 1 to 10, more bigger more faster
hammerOptions	Object		options for react-hammerjs

lib/TabContent

name	type	default	description
style	Object		tab content style
animated	Boolean	true	whether tabpane change with animation
animatedWithMargin	Boolean	false	whether animate tabpane with css margin

lib/SwipeableTabContent

swipeable tab panes, in addition to lib/TabContent props, extra props:

name	type	default	description
hammerOptions	Object		options for react-hammerjs

Note

If you want to support old browsers(which does not support flex/css-transition), please load the following script inside head to add no-flexbox/no-csstransition css classes

https://as.alipayobjects.com/g/component/modernizr/2.8.3/modernizr.min.js

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-tabs is released under the MIT license.